<template>
    <div class="wrapper">
      <myHeader :obj="myObj" @events="events"></myHeader>
      <div class="main">
        <div class="title"><span>接受约见</span></div>
        <div class="isTrue"><span>开启中</span><mt-switch v-model="isStart"></mt-switch></div>
        <div class="line"></div>
        <div class="domain"><input type="text" placeholder="擅长领域 (最多三个)"></div>
        <div class="contentWrap">
          <router-link to="/changeTheme">
            <div class="content"> 关于产品新手的攻略<span>内容<i></i></span></div>
          </router-link>
        </div>
        <div class="contentWrap">
          <div class="content border_b"> 一次会谈进阶高级 <span>内容<i></i></span></div>
        </div>
        <router-link to="/changeTheme"><div class="add">添加+</div></router-link>
        <div class="line"></div>
        <div class="domain"><input type="text" placeholder="擅长领域 (最多三个)"></div>
        <div class="contentWrap">
          <div class="content"> 关于产品新手的攻略 <span>语音<i></i></span></div>
        </div>
        <div class="contentWrap">
          <div class="content border_b"> 一次会谈进阶高级 <span>视频<i></i></span></div>
        </div>
        <div class="add">添加+</div>
        <!-- <div class="title"><i class="icon"></i>数据统计</div> -->
        <div class="moneyTitle_0314">
          <span class="moneySpan_0314"><i class="i2_0314"></i>数据统计</span>
          <router-link to="/extract"><span class="wallet_0314">钱包 >></span></router-link>
        </div>
        <div class="income">
          <div class="item1">
            <div class="moneyDiv">
              <span><i class="moneyIcon"></i>钱包</span>
            </div>
            <div class="money">¥23835.00</div>
            <p class="text2_0314">总收入</p>
          </div>
          <div class="item2 border_r">
            <div class="number">578</div>
            <p class="text2_0314">被查看数</p>
          </div>
          <div class="item2">
            <div class="number">369</div>
            <p class="text2_0314">约见人数</p>
          </div>
        </div>
        <div class="line"></div>
        <div class="recommend">
          <div class="personNum">已有<span>100</span>位用户推荐</div>
          <div class="persons">
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
          </div>
          <div class="share">分享到</div>
        </div>
        <ul class="bottomUL">
          <li><i class="wx"></i></li>
          <li><i class="circle"></i></li>
          <li><i class="xinl"></i></li>
          <li>
            <router-link to="/">
              <div>
                <span>发给朋友</span>
                <span>...</span>
              </div>
            </router-link>
          </li>
        </ul>
      </div>
    </div>
</template>
<script>
import myHeader from './base/myHeader';
import { Switch } from 'mint-ui';
export default {
  data () {
    return {
      myObj: {
        type: 2,
        text: "我的行家"
      },
      isStart: false
    }
  },
  methods: {
    events(i){
      if(i == 2){
         history.back();
      }

    }
  },
  components: {
    myHeader,
    mtSwitch: Switch
  }
}

</script>
<style>
  .mint-switch-input:checked + .mint-switch-core {
    border-color: #557AFF;
    background-color: #557AFF;
  }
</style>
<style lang="less">
  .wrapper {
    width: 3.75rem;
    .main {
      width: 100%;
      height: 100%;
      padding-top: .44rem;
      position: absolute;
      top: 0;
      left: 0;
      overflow-y: auto;
      box-sizing: border-box;
      .bottomUL {
        display: flex;
        li {
          width: 25%;
          display: flex;
          align-content: center;
          justify-content: center;
          padding: .2rem 0;
          span{
            display: block;
          }
          i {
            display: block;
            width: .5rem;
            height: .5rem;
            border-radius: 50%;
            
            &.wx {
              background: url('../assets/img/my@3x.png') center center;
              background-size: cover;
              background-repeat: no-repeat;
            }
            &.circle {
              background: url('../assets/img/my@3x.png') center center;
              background-size: cover;
              background-repeat: no-repeat;
            }
            &.xinl {
              background: url('../assets/img/my@3x.png') center center;
              background-size: cover;
              background-repeat: no-repeat;
            }
          }
        }
      }
      .recommend {
        padding: .15rem;
        box-sizing: border-box;
        background: white;
        .personNum {
          height: .4rem;
          line-height: .4rem;
          color: #555555;
          font-size: .16rem;
          font-weight: bold;
          span {
            padding: 0 .07rem;
            color: blue;
          }
        }
        .persons {
          height: .97rem;
          background: white;
          border-top: .01rem solid #E5E5E5;
          border-bottom: .01rem solid #E5E5E5;
          display: flex;
          align-items: center;
          
          span {
            display: block;
            width: .53rem;
            height: .53rem;
            background: url('../assets/img/my@3x.png') center center;
            background-size: cover;
            background-repeat: no-repeat;
            margin-right: .2rem;
            &:nth-last-child(1){
              margin-right: 0rem;
            }
          }
        }
        .share {
          height: .51rem;
          line-height: .51rem;
          color: #555555;
          font-size: .2rem;
          text-align: center;
          background: white;
        }
      }
      .income {
        width: 3.75rem;
        height: 2.15rem;
        background: white;
        >div {
          height: 1.07rem;
          float: left;
          .text2_0314 {
            font-size: .16rem;
            display: flex;
            justify-content: center;
            color: #39393D;
            text-align: center;
          }
          &.item1 {
            width: 3.75rem;
            border-bottom: .01rem solid #E5E5E5;
            
            .money {
              height: .36rem;
              color: #557AFF;
              font-size: .36rem;
              line-height: .36rem;
              font-weight: bold;
              text-align: center;

            }
            .moneyDiv {
              padding-top: .1rem;
              height: .22rem;
              display: flex;
              justify-content: flex-end;
              >span{
                display: flex;
                width: .7rem;
                align-items: center;
                font-size: .16rem;
                color: #39393D;
                .moneyIcon {
                  display: block;
                  width: .19rem;
                  height: .19rem;
                  line-height: .19rem;
                  border-radius: 50%;
                  background: #828282;
                  margin-right: .08rem;
                }
              }
              
            }
          
          }
          &.item2 {
            width: 1.85rem;
            .number {
              padding-top: .2rem;
              height: .36rem;
              color: #39393D;
              font-size: .36rem;
              line-height: .36rem;
              font-weight: bold;
              text-align: center;
            }
          }
          &.border_r {
            border-right: .01rem solid #E5E5E5;
          }
        }
        
      }
      .moneyTitle_0314 {
        padding: .18rem .15rem 0;
        height: .5rem;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .wallet_0314 {
          color: #39393D;
          font-size: .16rem;
        }
        .moneySpan_0314 {
          display: flex;
          align-items: center;
          height: .2rem;
          line-height: .2rem;
          font-size: .18rem;
          color: #39393D;
          .i2_0314 {
            display: inline-block;
            width: .19rem;
            height: .19rem;
            
            background: url("../assets/img/expert/icon_masr@3x.png");
            background-size: cover;
            background-repeat: no-repeat;
            margin-right: .08rem;
          }

        }
        
      }
      .title {
        height: .39rem;
        background: #EFEFF4;
        color: #888888;
        font-size: .14rem;
        padding-left: .15rem;
        display: flex;
        align-items: center;
        .icon {
          display: block;
          width: .19rem;
          height: .19rem;
          line-height: .19rem;
          border-radius: 50%;
          background: #828282;
          margin-right: .08rem;
        }
      }
      .line {
        height: .1rem;
        background: #EFEFF4;
      }
      .isTrue {
        height: .44rem;
        display: flex;
        justify-content:space-between;
        padding: 0 .15rem;
        box-sizing: border-box;
        background-color: white;
        align-items: center;
        span {
          font-size: .17rem;
          color: #000;
          font-weight: bold;
        }
      }
      .domain {
        padding-left: .15rem;
        background: white;
        //border-bottom: .01rem solid #ccc;
        input{
          width: 100%;
          font-size: .14rem;
          color: #888888;
        }
      }
      .add {
        height: .44rem;
        line-height: .44rem;
        text-align: center;
        font-size: .17rem;
        color: #39393D;
        font-weight: bold;
        background: white;
        text-indent: .15rem;
      }
      .contentWrap {
        height: .46rem;
        background: white;
        padding-left: .15rem;
        .border_b {
          border-bottom: .01rem solid #E5E5E5;
        }
        .content {
          height: .43rem;
          line-height: .43rem;
          border-top: .01rem solid #E5E5E5;
          font-size: .16rem;
          font-weight: 600;
          padding-right: .15rem;
          span {
            float: right;
            color: #888888;
            font-weight: 400;
            display: flex;
            align-items: center;
            i{
              display: block;
              width: .16rem;
              height: .16rem;
              background: url("../assets/img/person/icon_go09@3x.png");
              background-size: cover;
              background-repeat: no-repeat;
            }
          }
        }
        
      }
      
    }
    
  }
</style>
